<!--  -->
<template>
  <div>资讯
    <ELTable v-bind="tableConfig">
        <template #search="{searchSubmit,params}">
        <el-form :inline="true" class="demo-form-inline">
          
          <el-form-item label="关键字">
            <el-input style="width:150px"  v-model="params.key" placeholder="请输入关键字" clearable />
          </el-form-item>
       
          <el-form-item label="公告类型">
          <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择公告类型">
                    <el-option v-for="item in types" :label="item.name" :value="item.id" />
                </el-select>
        </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="searchSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
      </template>
        <template #buttons="{deleteAllHandle }">
        <el-button @click="add" type="primary" >添加</el-button>
        <el-button @click="deleteAllHandle()" type="danger">批量删除</el-button>
      </template>
        <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>

      <template #title="{scope }">
        <el-button link @click="show(scope.row.id)" type="primary" >{{scope.row.title}}</el-button>
 
      </template>
     </ELTable>

     <Detail :id="showId" @close="closeHandle" v-if="dialogVisible"></Detail>
  </div>
</template>

<script lang='ts' setup>
import Detail from '../../components/news/Detail.vue';
import { getList,getTypeList,del,deleteAll} from '../../service/news/news';
import ELTable,{TableType} from '../../components/ELTable.vue';
import { reactive,toRefs,ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
const dialogVisible=ref(false);
const showId=ref(0);
const tableConfig:TableType={
    loadData:getList,
    delete:del,
    deleteAll,
    columns:[
        {
            prop:"id",
            label:"id",
            attrs:{
                width:80
            }
        },
        {
            prop:"title",
            label:"标题",
            slot:true
        },
        {
            prop:"typename",
            label:"分类"
        },
        {
            prop:"picture",
            label:"图片",
            image:true
        },
        {
            prop:"state",
            label:"状态"
        },{
            prop:"addtime",
            label:"发布时间",
            timeFormat:"YYYY-MM-DD HH:mm",
            attrs:{width:150}
        },
        {
            prop:"edituser",
            label:"发布人"
        },
        {
            prop:"operate",
            label:"操作",
            slot:true,
            attrs:{width:180}
        }
    ]
}
const edit=(data:any)=>{

    console.log(data);
    // router.push("/newsadd?id="+data.id);
    router.push({path:"newsadd",query:{id:data.id}})

}
const types = ref<any>([]);
const getNewsTypeData = async () => {

    const res: any = await getTypeList();
    if (res.errCode === 10000) {
        types.value = res.data.list;
    }

}
const add=()=>{

    router.push("/newsadd");
}

//显示详情
const show=(id:number)=>{
   dialogVisible.value=true;
   showId.value=id;
}
const closeHandle=()=>{
    dialogVisible.value=false;
}
onMounted(() => {
    getNewsTypeData();
 

})
</script>
<style scoped>
</style>